<template>
  <a-row :gutter="16">
    <a-col :span="12">
      <a-card title="可选数据导出列">
        <draggable class="list-group" :list="optionalDataExportFieldList" itemKey="fieldName" group="people">
          <template #item="{ element, index }">
            <a-card-grid :style="{ ...coreStyle.width('100%'), ...coreStyle.textAlignCenter }">
              <div class="ant-card-grid-icon"><span class="ant-card-grid-icon-title">{{ index + 1 }}</span></div>
              <div class="ant-card-grid-content"><div class="ant-card-grid-content-title">{{ element.fieldComment }}</div></div>
            </a-card-grid>
          </template>
        </draggable>
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card title="已选数据导出列">
        <draggable class="list-group" :list="selectedDataExportFieldList" itemKey="fieldName" group="people">
          <template #item="{ element, index }">
            <a-card-grid :style="{ ...coreStyle.width('100%'), ...coreStyle.textAlignCenter }">
              <div class="ant-card-grid-icon"><span class="ant-card-grid-icon-title">{{ index + 1 }}</span></div>
              <div class="ant-card-grid-content"><div class="ant-card-grid-content-title">{{ element.fieldComment }}</div></div>
            </a-card-grid>
          </template>
        </draggable>
      </a-card>
    </a-col>
  </a-row>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import draggable from "vuedraggable"

export default defineComponent({
  name: 'DataExportColumnSelect',
  components: {
    draggable,
  },
  props: {
    optionalDataExportFieldList: {
      type: Array,
      default() {
        return []
      }
    },
    selectedDataExportFieldList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  emits: [
  ],
  data() {
    return {
    }
  },
  computed: {
  },
  methods: {
  },
  mounted() {
  }
})
</script>

<style scoped lang="less">

.list-group {
  height: 641px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 1px;
  padding-bottom: 1px;
}

.ant-card-grid-hoverable:hover {
  background-color: @table-row-hover-bg;
  cursor: move;
}

.ant-card-grid-icon {
  width: 32px;
  height: 32px;
  margin-right: 8px;
  font-size: @font-size-lg;
  font-family: @font-family;
  line-height: 32px;
  text-align: center;
  border: 1px solid @primary-3;
  border-radius: 32px;
  transition: background-color 0.3s, border-color 0.3s;
  background: @primary-3;
  display: inline-block;
}

.ant-card-grid-icon-title {
  position: relative;
  top: -1px;
  color: #fff;
  line-height: 1;
}

.ant-card-grid-content {
  display: inline-block;
  vertical-align: top;
}

.ant-card-grid-content-title {
  position: relative;
  display: inline-block;
  padding-right: 16px;
  color: @text-color;
  font-size: @font-size-lg;
  line-height: 32px;
}

</style>
